<template>
  <div class="cartcontrol">
    <transition name="move">
      <div class="cart-decrease" v-show="food.count>0" @click.stop.prevent="decreaseCart">
        <span class="inner"></span>
      </div>
    </transition>
    <div class="cart-count" v-show="food.count>0">{{food.count}}</div>
    <!--<div class="cart-count" v-show="food.myCount && food.myCount>0">{{food.myCount}}</div>-->
    <div class="Prompt_information" v-show="PromptShow">多种口味的订单只能在购物车中删除</div>
    <div class="cart-add" :class="{'cart-chose':food.count>0}" @click.stop.prevent="addCart"></div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue';
  import Bus from 'common/js/bus.js';

  export default {
    props: {
      food: {
        type: Object
      },
      goodsMark: ""
    },
    data () {
      return {
        PromptShow: false,//提示框是否显示
        ifAddCount: false,
        busOff:true // 限制ifAddCount事件重复加载
      };
    },
    created () {

    },
    methods: {
      addCart (event) {
        if (!event._constructed) {
          return;
        }
        //根据口味状态调节增加菜品的操作
//      if (parseInt(this.food.specStatus) && this.goodsMark) {
//        if(this.busOff){
//          Bus.$on('ifAddCount', params => {
//            this.ifAddCount = params;
//            if (this.ifAddCount) {
//              if (!this.food.count) {
//                Vue.set(this.food, 'count', 1);
//              }
//              this.$emit('add', true);
//            }
//            this.busOff = false
//          });
//        }
//      } else {
          if (!this.food.count) {
            Vue.set(this.food, 'count', 1);
          } else {
            this.food.count++;
          }
//      }
        this.$emit('add', false);
      },
      decreaseCart (event) {
        if (!event._constructed) {
          return;
        }
        //根据口味状态调节显示提示框与否
        if (parseInt(this.food.specStatus) && this.goodsMark) {
          clearTimeout(cTimer);
          this.PromptShow = true;
          let self = this;
          var cTimer = setTimeout(function () {
            self.PromptShow = false;
          }, 2000)
        } else {
          if (this.food.count) {
            this.food.count--;
          }
        }
      },
    },

  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  .cart-add {
    background: url(../../common/assets/01home_increase.png) no-repeat;
    background-size: 25px 25px;
    float: left;
  }

  .cart-chose {
    background: url(../../common/assets/01home_increase_s.png) no-repeat;
    background-size: 25px 25px;
  }

  .cart-decrease {
    background: url(../../common/assets/01home_reduce.png) no-repeat;
    background-size: 25px 25px;
    float: left;
  }

  .cartcontrol
    font-size: 0
    .cart-decrease
      display: inline-block
      width: 25px
      height: 25px
      transform: translate3d(0, 0, 0)
      .inner
        display: inline-block
        line-height: 24px
        font-size: 24px
        color: #e78a3d
        transition: all 0.4s linear
        transform: rotate(0)
      &.move-enter-active, &.move-leave-active
        transition: all 0.4s linear
      &.move-enter, &.move-leave-active
        opacity: 0
        transform: translate3d(24px, 0, 0)
        .inner
          transform: rotate(180deg)
    .cart-count
      display: inline-block
      vertical-align: top
      width: 20px
      padding-top: 6px
      line-height: 14px
      text-align: center
      font-size: 12px
      color: #e78a3d
      float: left
    .cart-add
      display: inline-block
      width: 25px
      height: 25px
</style>
